<template>
  <HModal class="f-flow-edge-config" :width="1000" title="配置路径"
          @cancel="close" :visible="visible" @ok="handleOK" cancel-text="取消" ok-text="确定">
    <Layout style="height: 700px">
      <layout-header>
        <FormulaInput ref="formulaInput" style="margin-top: 5px" v-model="formula"/>
      </layout-header>
      <LayoutBody>
        <Layout>
          <layout-side>
            <VariableSelector :flowModel="flowModel" @selectField="selectField" @select="selectVariabe"
                              :service="service" :fieldGroups="fieldGroups"/>
          </layout-side>
          <layout-body>
            <FormulaActions @extend="showFieldExtend" @addAction="addAction"/>
          </layout-body>
        </Layout>
      </LayoutBody>
      <LayoutFooter>
        <RowAttribute style="margin-top: 5px" v-show="showPriority" label="优先级" :labelWidth="labelWidth">
          <InputNumber v-model="priority" placeholder="请输入路径优先级" :min="0" :max="10000" style="flex: 1"/>
        </RowAttribute>

        <RowAttribute label="备注" style="margin-top: 5px" :labelWidth="labelWidth">
          <TextArea v-model="remark" placeholder="请输入备注" style="flex: 1"/>
        </RowAttribute>
      </LayoutFooter>
    </Layout>
  </HModal>
</template>
<script>
import {Input, InputNumber, Modal} from 'ant-design-vue';
import Layout from '@/components/flow/layout/Layout.vue';
import LayoutHeader from '@/components/flow/layout/LayoutHeader.vue';
import LayoutBody from '@/components/flow/layout/LayoutBody.vue';
import LayoutFooter from '@/components/flow/layout/LayoutFooter.vue';
import LayoutSide from '@/components/flow/layout/LayoutSide.vue';
import RowWrapper from '@/components/flow/layout/RowWrapper.vue';
import VariableSelector from '@/components/flow/EdgeConfiguration/VariableSelector.vue';
import FormulaInput from '@/components/flow/EdgeConfiguration/FormulaInput.vue';
import FormulaActions from '@/components/flow/EdgeConfiguration/FormulaActions.vue';
import RowAttribute from '@/components/flow/layout/RowAttribute.vue';
import {createProps, openModal} from '@/utils/index.js';
import FieldExtendModal from '@/components/flow/FieldExtendModal/FieldExtendModal.vue';
import HModal from '@/components/HModal/HModal.vue';

export default {
  name: 'EdgeConfiguration',
  components: {
    HModal,
    RowAttribute,
    FormulaActions,
    FormulaInput,
    VariableSelector,
    RowWrapper,
    TextArea: Input.TextArea,
    LayoutSide,
    LayoutFooter,
    LayoutBody,
    LayoutHeader,
    Layout,
    InputNumber,
    Modal
  },
  props: {
    fieldComponentRegistry: createProps(Object),
    flowModel: createProps(Object),
    service: {
      type: Function,
      default: () => () => {
      }
    },
    fieldGroups: createProps(Array, () => []),
    flowModelInstance: {
      type: Object,
      default: () => ({}),
    },
    edge: {
      type: Object,
      default: () => ({}),
    }
  },
  data() {
    return {
      labelWidth: '60px',
      selectedVariable: undefined,
      visible: false,
      priority: 100,
      remark: undefined,
      formula: undefined,
      formulaText: undefined,
    };
  },
  methods: {
    selectField(variable) {
      this.selectedVariable = variable;
    },
    selectVariabe(variable) {
      this.selectedVariable = variable;
      this.$refs.formulaInput.addVariabe(variable);
    },
    showFieldExtend() {
      if (!this.selectedVariable) return;
      let field = this.selectedVariable;
      openModal(FieldExtendModal, {field, fieldComponentRegistry: this.fieldComponentRegistry}, data => {
        if (data) {
          this.$refs.formulaInput.addConstant(data);
        }
      });
    },
    addAction(action) {
      this.$refs.formulaInput.addAction(action);
    },
    handleOK() {
      this.service.post('/flow/formula/translate', {formula: this.formula}).then(data => {
        this.edge.priority = this.priority;
        this.edge.remark = this.remark;
        this.edge.formula = data.formula;
        this.edge.formulaText = data.formulaText;
        this.$emit('ok');
        this.close();
      });
    },
    open() {
      this.visible = true;
      this.$nextTick(() => {
        this.remark = this.edge.remark;
        this.priority = this.edge.priority;
        this.formula = this.edge.formula;
        this.formulaText = this.edge.formulaText;
      });
    },
    close() {
      this.visible = false;
      this.$emit("close");
    },
  },
  computed: {
    showPriority() {
      try {
        let node = this.flowModelInstance.getNodeById(this.edge.source);
        return node && node.executeWay === 'exclusive';
      } catch (e) {
      }
      return false;
    },
  }
};
</script>
<style>
.f-flow-edge-config .ant-modal-body {
  padding: 10px;
}
</style>